// 每个主题特有的设置
.theme-#{$theme-name} {
  .ui-card {
    &.ui-card {
      border: $theme-container-border-outer;
      .ui-card__header {
        border-bottom: $theme-container-border-outer;
      }
    }
  }

  // 背景图片和遮罩
  .ui-layout-header-aside-group {
    background-color: $theme-bg-color;
    .ui-layout-header-aside-mask {
      background: $theme-bg-mask;
    }
  }
  .ui-theme-container {
    background: $theme-bg-color;
    .ui-theme-container-main {
      background: $theme-bg-color;
    }
  }
  // 菜单项目
  @mixin theme-menu-hover-style {
    color: $theme-menu-item-color-hover;
    i.fa {
      color: $theme-menu-item-color-hover;
    }
    background: $theme-menu-item-background-color-hover;
  }
  %ui-menu-icon {
    i {
      display: inline-block;
      width: 14px;
      text-align: center;
      margin-right: 5px;
    }
    svg {
      margin: 0px;
      height: 14px;
      width: 14px;
      margin-right: 5px;
    }
  }
  .ui-submenu__title {
    @extend %unable-select;
    @extend %ui-menu-icon;
  }
  .ui-menu-item {
    @extend %unable-select;
    @extend %ui-menu-icon;
  }
  .ui-submenu__title:hover {
    @include theme-menu-hover-style;
  }
  .ui-menu-item:hover {
    @include theme-menu-hover-style;
  }
  .ui-menu--horizontal .ui-menu-item:not(.is-disabled):hover {
    @include theme-menu-hover-style;
  }
  .ui-menu--horizontal .ui-menu .ui-submenu__title:hover {
    @include theme-menu-hover-style;
  }

  // 顶栏
  .ui-theme-header {
    // 顶栏菜单空间不足时显示的滚动控件
    .ui-theme-header-menu {
      .ui-theme-header-menu__prev,
      .ui-theme-header-menu__next {
        color: $theme-header-item-color;
        background: $theme-header-item-background-color;
        &:hover {
          color: $theme-header-item-color-hover;
          background: $theme-header-item-background-color-hover;
        }
      }
    }
    .ui-theme-header-top {
      @extend %width;
      display: flex;
      justify-content: space-between;
      height: 60px;
      align-items: center;
    }
    // 切换按钮
    .toggle-aside-btn {
      i {
        color: $theme-header-item-color;
        background: $theme-header-item-background-color;
        &:hover {
          color: $theme-header-item-color-hover;
        }
      }
    }
    // 顶栏菜单
    .ui-menu {
      .ui-menu-item {
        transition: border-top-color 0s;
        color: $theme-header-item-color;
        background: $theme-header-item-background-color;

        i.fa {
          color: inherit;
        }
        &:hover {
          color: $theme-header-item-color-hover;
          background: $theme-header-item-background-color-hover;
          i.fa {
            color: inherit;
          }
        }
        &:focus {
          color: $theme-header-item-color-focus;
          background: $theme-header-item-background-color-focus;
          i.fa {
            color: inherit;
          }
        }
        &.is-active {
          color: $theme-header-item-color-active;
          // background: $theme-header-item-background-color-active;
          background-color: $theme-aside-item-background-color-active;
          i.fa {
            color: inherit;
          }
        }
      }
      .ui-submenu {
        &.is-active {
          .ui-submenu__title {
            color: $theme-header-item-color-active;
            background: $theme-header-item-background-color-active;
            i.fa {
              color: inherit;
            }
          }
        }
        .ui-submenu__title {
          transition: border-top-color 0s;
          color: $theme-header-item-color;
          background: $theme-header-item-background-color;
          i.fa {
            color: inherit;
          }
          .ui-submenu__icon-arrow {
            color: $theme-header-item-color;
          }
          &:hover {
            color: $theme-header-item-color-hover;
            background: $theme-header-item-background-color-hover;
            i.fa {
              color: inherit;
            }
            .ui-submenu__icon-arrow {
              color: $theme-header-item-color-hover;
            }
          }
          &:focus {
            color: $theme-header-item-color-focus;
            background: $theme-header-item-background-color-focus;
            i.fa {
              color: inherit;
            }
            .ui-submenu__icon-arrow {
              color: $theme-header-item-color-focus;
            }
          }
        }
      }
    }
    .title-second_title {
      .second-title_body {
        .title-white {
          color: #fff;
          display: inline-block;
          line-height: 30px;
          padding: 0 18px;
          background: $theme-aside-item-background-color-active;
          border-radius: 20px;
          &:hover {
            background: $color-text-second-title-is-active;
            color: #fff;
          }
        }
        .is-active {
          .title-white {
            color: #fff;
            display: inline-block;
            line-height: 30px;
            padding: 0 18px;
            background: $color-text-second-title-is-active;
            border-radius: 20px;
          }
        }
      }
    }
    // 顶栏右侧
    .ui-header-right {
      .btn-text {
        color: $theme-header-item-color;
        &.can-hover {
          &:hover {
            color: $theme-header-item-color-hover;
            background: $theme-header-item-background-color-hover;
          }
        }
      }
    }
  }
  .zyl-aside-title {
    // background-color: #00ba75 !important;
    font-size: 16px;
    color: #93aaff;
    height: 50px ;
    line-height: 50px;
    // background: #00ba75 url('./images/aside-logo.png') 2px center no-repeat !important;
    position: static;
    padding-left: 10px;
    &.is-active {
      color: #fff !important;
    }
    cursor: pointer;
    .title-title.title-title-no-child {
      border-radius: 20px;
      padding-right: 15px;
      width: 180px;
    }
    .title-title {
      display: inline-block;
      width: 190px;
      height: 100%;
      padding: 0 25px 0 20px;
      box-sizing: border-box;
      border-radius: 20px 0 0 20px;
      line-height: 40px;
      height: 40px;
      .first-title-icon {
        width: 18px;
        height: 18px;
      }
      &:hover {
        background-color: $color-primary;
      }
      .icon-arrow_left {
        float: right;
        margin-right: 0;
        width: 4px;
        height: 8px;
      }
    }
    .zyl-aside-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .title-second {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 200px;
      z-index: 22;
      // max-height: calc(100vh - 260px);
      overflow-y: auto;
      background-color: #fff;
      padding: 20px 0 0;
      background: $color-bg-gradient-second;
      // border-radius: 8px;
      // box-shadow: 2px 1px 12px 0px rgba(0, 0, 0, 0.18);
      width: 246px;
      .title-second_title {
        color: $color-text-second-title;
        display: block;
        padding-left: 15px;
        position: relative;
        margin-bottom: 15px;
        line-height: 30px;
        &.is-active {
          .title-second_body {
            background-color: $color-text-second-title-is-active;
            border-radius: 20px;
          }
        }
        .title-second_body {
          padding: 0 15px;
          display: inline-block;
          &:hover.title-second_body-leaf {
            background-color: $color-text-second-title-is-active;
            border-radius: 20px;
          }
        }
        .left-border {
          width: 2px;
          height: 14px;
          background-color: #fecd00;
          display: inline-block;
          margin-right: 6px;
          margin-top: -3px;
        }
        &.title-second_title_active {
          color: #fff;
          display: block;
          margin-bottom: 10px;
        }
      }
      .second-title_body {
        width: 100%;
        .ui-menu-item {
          &:hover {
            .title-white {
              color: #fff;
              display: inline-block;
              line-height: 25px;
              padding: 0 18px;
              background: $color-text-second-title-is-active;
              border-radius: 20px;
            }
          }
          &.is-active {
            .title-white {
              color: #fff;
              display: inline-block;
              line-height: 25px;
              padding: 0 18px;
              background: $color-text-second-title-is-active;
              border-radius: 20px;
            }
          }
        }
      }
    }
  }
  // [布局] 顶栏下面
  .ui-theme-container {
    // 侧边栏
    .ui-theme-container-aside {
      // 菜单为空的时候显示的信息
      .ui-layout-header-aside-menu-empty {
        // background: $theme-aside-menu-empty-background-color;
        i {
          color: $theme-aside-menu-empty-icon-color;
        }
        span {
          color: $theme-aside-menu-empty-text-color;
        }
        &:hover {
          color: $theme-aside-item-color-active;
          fill: $theme-aside-item-color-active;
          background: transparent;
          i {
            color: $theme-aside-menu-empty-icon-color-hover;
          }
          // span {
          //   color: $theme-aside-menu-empty-text-color-hover;
          // }
        }
      }
      // [菜单] 正常状态
      .ui-menu {
        position: static;
        .ui-menu-item {
          color: $theme-aside-item-color;
          background: $theme-aside-item-background-color;
          i {
            color: $theme-aside-item-color;
          }
          &:hover {
            color: $theme-aside-item-color-hover;
            fill: $theme-aside-item-color-hover;
            // background: $theme-aside-item-background-color-hover;
            i {
              color: $theme-aside-item-color-hover;
            }
          }
          &:focus {
            color: $theme-aside-item-color-focus;
            fill: $theme-aside-item-color-focus;
            background: none;
            i {
              color: $theme-aside-item-color-focus;
            }
          }
          &.is-active {
            color: $theme-aside-item-color-active;
            fill: $theme-aside-item-color-active;
            // background: $theme-aside-item-background-color-active;

            i {
              color: $theme-aside-item-color-active;
            }
            // .title-white {
            //   color: #fff;
            //   display: inline-block;
            //   line-height: 30px;
            //   padding: 0 18px;
            //   background: $theme-aside-item-background-color-active;
            //   border-radius: 20px;
            // }
          }
        }
      }
      .ui-submenu {
        .ui-submenu__title {
          color: $theme-aside-item-color;
          background: $theme-aside-item-background-color;
          i {
            color: $theme-aside-item-color;
          }
          .ui-submenu__icon-arrow {
            color: $theme-aside-item-color;
          }
          &:hover {
            color: $theme-aside-item-color-hover;
            background: $theme-aside-item-background-color-hover;
            i {
              color: $theme-aside-item-color-hover;
            }
            .ui-submenu__icon-arrow {
              color: $theme-aside-item-color-hover;
            }
          }
        }
      }
    }
    .ui-theme-container-main.single-page {
      margin: 30px 0;
      left: 0;
      .main-area {
        .ui-theme-container-main-layer {
          margin: auto;
          top: 0;
        }
      }
    }
    .ui-theme-container-main {
      // 主体部分分为多页面控制器 和主体
      .ui-theme-container-main-header {
        // 多页面控制器
        .ui-multiple-page-control {
          .ui-tabs__header.is-top {
            border-bottom-color: $theme-multiple-page-control-border-color;
          }
          .ui-tabs__nav {
            border-color: $theme-multiple-page-control-border-color;
            .ui-tabs__item {
              @extend %unable-select;
              color: $theme-multiple-page-control-color;
              background-color: $theme-multiple-page-control-background-color;
              border-left-color: $theme-multiple-page-control-border-color;
              &:first-child {
                border-left: none;
                &:hover {
                  padding: 0px 20px;
                }
                // .ui-icon-close {
                //   // display: none;
                // }
              }
            }
            .ui-tabs__item.is-active {
              color: $theme-multiple-page-control-color-active;
              background-color: $theme-multiple-page-control-background-color-active;
              border-bottom-color: $theme-multiple-page-control-border-color-active;
            }
          }
          %ui-tabs__nav {
            font-size: 20px;
          }
          .ui-tabs__nav-prev {
            @extend %ui-tabs__nav;
            color: $theme-multiple-page-control-nav-prev-color;
          }
          .ui-tabs__nav-next {
            @extend %ui-tabs__nav;
            color: $theme-multiple-page-control-nav-next-color;
          }
        }
        // 多页控制器的关闭控制
        .ui-multiple-page-control-btn {
          .ui-dropdown {
            .ui-button-group {
              .ui-button {
                border-color: $theme-multiple-page-control-border-color;
              }
            }
          }
        }
      }
      // 主体
      .ui-theme-container-main-body {
        // 布局组件
        .container-component {
          // [组件]
          // ui-container-full 填充型
          .ui-container-full {
            border: none;
            border-top: none;
            border-bottom: none;
            .ui-container-full__header {
              border-bottom: none;
              background: $theme-container-background-color;
            }
            .ui-container-full__body {
              background: $theme-container-background-color;
            }

            .ui-container-full__footer {
              border-top: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }
          }
          // [组件]
          // ui-container-full-bs 填充型 滚动优化
          .ui-container-full-bs {
            border: $theme-container-border-outer;
            border-top: none;
            border-bottom: none;
            .ui-container-full-bs__header {
              border-bottom: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }
            .ui-container-full-bs__body {
              background: $theme-container-background-color;
            }
            .ui-container-full-bs__footer {
              border-top: $theme-container-border-inner;
              background: $theme-container-header-footer-background-color;
            }
          }
          // [组件]
          // ui-container-ghost 隐形布局组件
          .ui-container-ghost {
            .ui-container-ghost__header {
              border-bottom: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
            .ui-container-ghost__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }
          // [组件]
          // ui-container-ghost-bs 隐形布局组件 滚动优化
          .ui-container-ghost-bs {
            .ui-container-ghost-bs__header {
              border-bottom: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
            .ui-container-ghost-bs__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }
          // [组件]
          // ui-container-card 卡片型
          .ui-container-card {
            .ui-container-card__header {
              border-bottom: $theme-container-border-inner;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
            .ui-container-card__body {
              .ui-container-card__body-card {
                background: $theme-container-background-color;
                border-left: $theme-container-border-outer;
                border-right: $theme-container-border-outer;
                border-bottom: $theme-container-border-outer;
              }
            }
            .ui-container-card__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }
          // [组件]
          // ui-container-card-bs 卡片型 滚动优化
          .ui-container-card-bs {
            .ui-container-card-bs__header {
              border-bottom: $theme-container-border-inner;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
            .ui-container-card-bs__body {
              .ui-container-card-bs__body-card {
                background: $theme-container-background-color;
                border-left: $theme-container-border-outer;
                border-right: $theme-container-border-outer;
                border-bottom: $theme-container-border-outer;
              }
            }
            .ui-container-card-bs__footer {
              border-top: $theme-container-border-outer;
              border-left: $theme-container-border-outer;
              border-right: $theme-container-border-outer;
              background: $theme-container-header-footer-background-color;
            }
          }
        }
        .page-index {
          // .container-component{
          .ui-container-full {
            .ui-container-full__body {
              background: $theme-bg-color;
              padding: 0;
            }
          }
          // }
        }
      }
    }
  }
  .page-index {
    .ui-theme-container-main {
      background: $theme-bg-color;
    }
  }
}
